<template>
  <back-item :title="title"></back-item>
  <div class="animated fadeInLeft user-top" v-if="show">
    <!-- 充值记录 -->
    <div style="padding: 10px; background: #fff">
      <div
        v-if="dataList.length > 0"
        v-infinite-scroll="getDataList"
        infinite-scroll-distance="20px"
        :infinite-scroll-disabled="disabled"
      >
        <div v-for="item of dataList" :key="item.id">
          <div class="item" @click="tochoose(item.orderId)">
            <div class="left-item">
              <div>{{ item.title }}</div>
              <div>{{ tool.formatDateToYYYYMMDD(item.createTime) }}</div>
            </div>
            <div
              class="right-item"
              v-if="item.shopType === 2 && item.status !== 0"
            >
              + {{ item.gold }}金币
            </div>
          </div>
          <div v-if="active === item.orderId">
            <p v-if="item.shopType === 2">购买了【{{ item.gold }}】金币</p>
            <p v-if="item.shopType === 1">购买了【{{ item.title }}】</p>
            <p>订单号：{{ item.orderId }}</p>
            <p>支付时间：{{ item.payTime }}</p>
            <p>
              状态：
              <el-tag :type="item.status === 0 ? 'info' : 'success'">
                {{ item.status === 0 ? "未支付" : "已支付" }}
              </el-tag>
            </p>
            <p>支付金额：{{ item.payPrice.toFixed(2) }}</p>
            <p>创建时间：{{ item.createTime }}</p>
          </div>
        </div>
        <div v-if="loading" class="fcolor" style="text-align: center">
          <data-load-vue></data-load-vue>
        </div>
        <div
          v-if="noMore"
          class="fcolor"
          style="text-align: center; line-height: 80px"
        >
          No more
        </div>
      </div>
      <el-empty description="description" v-else />
    </div>
  </div>
  <page-loading-vue v-else></page-loading-vue>
</template>

<script setup>
import request from "@/assets/js/request";
import backItem from "@/components/other/back-item.vue";
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import tool from "@/assets/js/tool";
import dataLoadVue from "@/components/other/data-load.vue";
import pageLoadingVue from "@/components/other/page-loading.vue";

const title = ref("充值记录");
const page = ref({
  pageNum: 1,
  total: 0,
  pages: 0,
});
const show = ref(false);
const dataList = ref([]);
const active = ref("");
const loading = ref(false);
const noMore = computed(() => dataList.value.length >= page.value.total);
const disabled = computed(() => loading.value || noMore.value);

const getDataList = () => {
  loading.value = true;
  request
    .get(`/client/order/list?pageNum=${page.value.pageNum}`)
    .then((res) => {
      if (res.code === 200) {
        dataList.value.push(...res.data.records);
        page.value.pageNum += 1;
        page.value.total = res.data.total;
        page.value.pages = res.data.pages;
        loading.value = false;
      } else {
        ElMessage.error(res.msg);
      }
      show.value = true;
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });

  setTimeout(() => {
    show.value = true;
  }, 5000);
};

const tochoose = (orderId) => {
  if (active.value !== orderId) {
    active.value = orderId;
  } else {
    active.value = "";
  }
};

onMounted(() => {
  getDataList();
});
</script>

<style scoped lang="scss">
.item {
  display: flex;
  padding: 10px 0;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px #eee solid;
  .left-item {
    & > div:nth-child(1) {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    & > div:nth-child(2) {
      font-size: 14px;
      color: #686868;
    }
  }

  .right-item {
    font-size: 18px;
    font-weight: 600;
    color: #ff5d1e;
  }
}
</style>
